<script setup>
import { reactive, ref } from "vue";
import {
  RightOutlined,
  CheckOutlined,
  // LockOutlined,
  CheckCircleOutlined,
  LoadingOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const app = reactive({
  id: "1",
  name: "开发者用户名",
  names: "尚飞",
  aappID: 6251548,
  userID: 6251548,
  status: "审核成功",
  number: "80527996@qq.com",
  benbn: "1.2.0",
  tel: "15083345956",
  title: "com.jsljk.apk",
  type: "个人",
  createTime: "2023/5/31 15:49:54",
  size: "52.35M",
  faces: "校验成功",
  standing: "未认证",
  address: "XXX省XXX市XXX区XXX镇XXX路XXX门牌号",
  description:
    "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
  // icon: 'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  icon:
    "https://ali-img.100520.com/images/202447/d659f861b95a5c0c1650b262b4c0a6bb_1id6snchu.png",
  sort: "冒险、益智、休闲、宠物",
  Language: "中文",
  introduce: "一场拥抱自由和温暖的云端之旅",
  age: "12+",
  intor:
    "时隔多年再度回归，开启一场难忘的社交冒险体验，在晴空与云海之中与翱翔的追梦者相遇。+",
  bannerList: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  ],
  urls: [
    "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    // 'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  ],
  videoTitle: "一场拥抱自由和温暖的云端之旅",
  videoUrl:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  videoFile:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
});

const formState = ref({
  number: "111",
  userID: "22",
  standing: "33",
  tel: "44",
  faces: "校验成功",
  front: "error",
});
const detailData = reactive([
  {
    name: "1",
    value: 1,
  },
  {
    name: "2",
    value: 2,
  },
  {
    name: "3",
    value: 3,
  },
  {
    name: "4",
    value: 4,
  },
]);
const router = useRouter();
const labelCol = {
  style: {
    width: "110px",
    marginRight: "34px",
  },
};
const wrapperCol = {
  span: 24,
};
const showFace = ref(true);
const faceEdit = () => {
  showFace.value = !showFace.value;
};
const faceSave = () => {
  console.log(formState.value, "faceSave");
  showFace.value = true;
};

const navigateToChangeTel = (item, passw) => {
  router.push({
    name: "changeTheTel",
    params: {
      switchingType: item,
      ispassw: passw,
    },
  });
};
</script>

<template>
  <div class="app-container">
    <a-row :gutter="[8, 16]">
      <a-col :span="17">
        <a-card
          class="border-radius0"
          :bordered="false"
          bodyStyle="padding:0 24px 12px"
          title="基础信息"
        >
          <!-- <template #title>
            <header class="titleHeader">
              <div class="titleLeft">基础信息</div>
            </header>
          </template> -->
          <div class="content">
            <div v-if="app">
              <a-row>
                <a-col :xs="10" :xl="9">
                  <div class="basic_info">
                    <a target="_blank" :href="app.icon">
                      <img
                        :src="app.icon"
                        style="
                          display: block;
                          width: 70px;
                          height: 70px;
                          vertical-align: middle;
                          border-radius: 12px;
                        "
                      />
                    </a>
                    <div class="lt">
                      <span style="font-weight: bold">开发者: {{ app.name }}</span>
                      <span>UserID: {{ app.userID }}</span>
                      <span class="app_status"
                        >游戏状态:
                        <a-tag type="primary" color="warning" :bordered="false">{{
                          app.status
                        }}</a-tag>
                      </span>
                    </div>
                  </div>
                </a-col>
                <a-col :xs="12" :xl="11" class="basic_info_box">
                  <div class="rt">
                    <span>开发者账号: {{ app.benbn }}</span>
                    <span>开发者类型: {{ app.type }}</span>
                    <span>创建时间: {{ app.createTime }}</span>
                  </div>
                </a-col>
                <a-col :xs="2" :xl="4" class="box_center">
                  <a-button
                    block
                    type="primary"
                    style="width: 100%"
                    @click="() => router.push('/developerServices/developerAccountEdit')"
                  >
                    编辑资料
                  </a-button>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card
          class="border-radius0 marginTop12"
          :bordered="false"
          bodyStyle="padding:0 24px 12px"
          title="个人信息"
        >
          <div class="content">
            <div class="content_form1 marginTop12">
              <a-row justify="center" algin="middle">
                <a-col flex="auto" class="steps_title1">
                  <a-form
                    layout="horizontal"
                    :model="formState"
                    ref="formRef"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    labelAlign="left"
                    :colon="false"
                  >
                    <a-form-item label="姓名" name="name">
                      <span class="ant-form-text">{{ app.names }}</span>
                    </a-form-item>
                    <a-form-item label="身份证号" name="name">
                      <span class="ant-form-text">{{ app.number }}</span>
                      <a-button type="text" style="color: #31bc63">显示/隐藏</a-button>
                    </a-form-item>
                    <a-form-item label="人脸校验" name="name">
                      <span v-if="showFace" class="ant-form-text">{{ app.faces }}</span>
                      <span v-else>
                        <a-input
                          v-model:value="formState.faces"
                          class="my_input"
                        /><CheckOutlined style="margin: 0 12px" @click="faceSave" />
                      </span>
                      <a-button type="text" style="color: #31bc63" @click="faceEdit"
                        >修改</a-button
                      >
                    </a-form-item>
                    <a-form-item label="身份证件照">
                      <div class="banner" v-if="app.urls">
                        <!-- <a-image-preview-group
                          v-for="url in app.urls"
                          :key="url" class="image_group"
                        >
                          <a-image :width="120" :key="url" :src="url" />
                          <span >正面</span>
                        </a-image-preview-group> -->
                        <div class="image_group" v-if="app.urls">
                          <div v-for="url in app.urls" :key="url">
                            <a-image
                              style="display: block; margin-right: 12px"
                              :width="120"
                              :key="url"
                              :src="url"
                            />
                            <div>正面</div>
                          </div>
                          <!-- <a-alert
                            v-if="formState.front === 'error'"
                            style="background: none; border: none"
                            message="身份证件照片模糊不清晰，请重新提交清晰完整的身份证件照片。"
                            type="error"
                            show-icon
                          /> -->
                        </div>
                        <!-- <a-image-preview-group v-if="app.urls">
                          <a-image
                            :width="68"
                            v-for="url in app.urls"
                            :key="url"
                            :src="url"
                          />
                        </a-image-preview-group> -->
                      </div>
                      <a-alert
                        v-if="formState.front === 'error'"
                        style="background: none; border: none"
                        message="身份证件照片模糊不清晰，请重新提交清晰完整的身份证件照片。"
                        type="error"
                        show-icon
                      />
                    </a-form-item>
                    <a-form-item label="手持证件照">
                      <a-row :wrap="false">
                        <a-col flex="none">
                          <div class="banner">
                            <a-image-preview-group v-if="app.urls">
                              <a-image
                                :width="120"
                                v-for="url in app.urls"
                                :key="url"
                                :src="url"
                              />
                            </a-image-preview-group>
                          </div>
                        </a-col>
                        <a-col flex="auto">
                          <a-typography-title :level="5" class="tips"
                            >拍照要求</a-typography-title
                          >
                          <a-typography-paragraph
                            ellipsis="tips"
                            class="tips"
                            content="(1) 中国大陆国籍开发者必须通过人脸校验；"
                          />
                          <a-typography-paragraph
                            ellipsis="tips"
                            class="tips"
                            content="(2)开发者本人正面手持身份证件拍照；"
                          />
                          <a-typography-paragraph
                            ellipsis="tips"
                            class="tips"
                            content="(3)个人开发者年龄需要本人年满18周岁且不得超过65周岁。"
                          />
                        </a-col>
                      </a-row>
                    </a-form-item>
                    <div class="a_col_date">
                      <h1 style="font-weight: bolder; margin-bottom: 12px">联系方式</h1>
                    </div>
                    <a-form-item label="联系人" name="name">
                      <span class="ant-form-text">{{ app.names }}</span>
                    </a-form-item>
                    <a-form-item label="手机号码" name="name">
                      <span class="ant-form-text">{{ app.tel }}</span>
                    </a-form-item>
                    <a-form-item label="电子邮箱" name="name">
                      <span class="ant-form-text">{{ app.number }}</span>
                    </a-form-item>
                    <a-form-item label="其他联系方式" name="name">
                      <span class="ant-form-text">{{ app.tel }}</span>
                    </a-form-item>
                    <a-form-item label="联系地址" name="name">
                      <span class="ant-form-text">{{ app.address }}</span>
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card class="border-radius0 box" :background-color="themeColors">
          <div class="box_avatar">
            <a target="_blank" :href="app.icon">
              <img
                :src="app.icon"
                style="
                  display: block;
                  width: 100%;
                  height: 70px;
                  vertical-align: middle;
                  border-radius: 50%;
                "
              />
            </a>
            <span>{{ app.name }}</span>
            <span class="box_avatar_qq">企业/个人账号：{{ app.number }}</span>
          </div>
        </a-card>
        <a-card class="border-radius0">
          <!-- <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            labelAlign="left"
            :colon="false"
          >
            <a-row :gutter="[8, 16]">
              <a-col :span="12">
                <span><strong>用户类型</strong></span>
                <span>个人 / 企业</span>
              </a-col>
              <a-col :span="12"> </a-col>
            </a-row>
            <a-row :gutter="[8, 16]">
              <a-col :span="12"> </a-col>
              <a-col :span="12">
                <span><strong>UserID</strong></span>
                <span>6251548</span>
              </a-col>
            </a-row>
            <a-row :gutter="[8, 16]" style="margin-top: 16px">
              <a-col :span="12">
                <p><strong>身份认证</strong></p>
                <a-badge :status="'error'" />
                <p>审核失败</p>
              </a-col>
              <a-col :span="12"> </a-col>
            </a-row>
            <a-row :gutter="[8, 16]" style="margin-top: 16px">
              <a-col :span="12"> </a-col>
              <a-col :span="12">
                <p><strong>企业认证</strong></p>
                <a-switch
                  checked-children="已认证"
                  un-checked-children="未认证"
                  default-checked
                />
              </a-col>
            </a-row>
            <a-row :gutter="[8, 16]" style="margin-top: 16px">
              <a-col :span="12">
                <p><strong>绑定手机号</strong></p>
                <p>188****5566 <a @click="changePhone">换绑</a></p>
              </a-col>
              <a-col :span="12">
                <p><a @click="changeEmail">换绑</a></p>
              </a-col>
            </a-row>
            <a-row :gutter="[8, 16]" style="margin-top: 16px">
              <a-col :span="12">
                <p><strong>绑定手机号</strong></p>
                <p>188****5566 <a @click="changePhone">换绑</a></p>
              </a-col>
              <a-col :span="12">
                <p><strong>绑定邮箱</strong></p>
                <p>80527996qq.com <a @click="changeEmail">换绑</a></p>
              </a-col>
            </a-row>
            <a-row style="margin-top: 24px; text-align: center">
              <a-button type="primary" style="width: 100%">修改密码</a-button>
            </a-row>
            <a-row style="margin-top: 16px; text-align: center">
              <a-button style="width: 100%">退出账号</a-button>
            </a-row>

            <div style="margin-top: 16px">
              <a-button type="primary" @click="changePassword"
                >修改密码</a-button
              >
              <a-button style="margin-left: 8px" @click="logout"
                >退出账号</a-button
              >
            </div>
          </a-form> -->
          <a-descriptions title="开发者信息" bordered size="small">
            <template #extra>
              <RightOutlined />
            </template>
            <a-descriptions-item label="用户类型" :span="16">{{
              app.type
            }}</a-descriptions-item>
            <a-descriptions-item label="UserID" :span="16">6251548</a-descriptions-item>
            <a-descriptions-item label="身份认证" :span="16">
              <a-tag color="success" v-if="app.status === '审核成功'">{{
                app.status
              }}</a-tag>
              <a-tag
                color="warning"
                v-else-if="app.status === '审核中'"
                :bordered="false"
                >{{ app.status }}</a-tag
              >
              <a-tag
                color="error"
                :bordered="false"
                v-else-if="app.status === '审核失败'"
                >{{ app.status }}</a-tag
              >
              <span
                v-if="app.status === '审核成功'"
                style="color: #31bc63"
                class="descriptions_span"
              >
                <CheckCircleOutlined />
              </span>
              <span v-else-if="app.status === '审核中'" class="descriptions_span">
                <LoadingOutlined />
              </span>
              <span
                v-else-if="app.status === '审核失败'"
                class="descriptions_span"
                style="color: red"
              >
                <ExclamationCircleOutlined />
              </span>
              <span v-else-if="app.status === '审核错误'"
                ><a-badge status="error"
              /></span>
            </a-descriptions-item>
            <a-descriptions-item
              v-if="app.standing === '未认证'"
              label="企业认证"
              :span="16"
            >
              <a-tag :bordered="false">{{ app.standing }}</a-tag>
              <span class="descriptions_span"> <CheckCircleOutlined /></span>
            </a-descriptions-item>
            <a-descriptions-item v-else label="企业认证" :span="16">
              {{ app.standing }}
              <span class="descriptions_span" style="color: #31bc63">
                <CheckCircleOutlined
              /></span>
            </a-descriptions-item>
            <a-descriptions-item label="绑定手机号" :span="16">
              {{ app.tel }}
              <span
                class="descriptions_span"
                style="color: #31bc63"
                @click="navigateToChangeTel(1)"
                >换绑</span
              >
              <!-- `/developerServices/changeTheTel?id=${tel}`  -->
            </a-descriptions-item>
            <a-descriptions-item label="绑定邮箱" :span="16">
              {{ app.number }}
              <span
                class="descriptions_span"
                style="color: #31bc63"
                @click="navigateToChangeTel(3)"
                >换绑</span
              >
              <!-- <span
                class="descriptions_span"
                @click="() => router.push('/developerServices/changeTheTel')"
                >换绑</span
              > -->
            </a-descriptions-item>
          </a-descriptions>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button type="primary" style="width: 100%" @click="navigateToChangeTel(2)"
              >修改密码</a-button
            >
          </a-row>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button style="width: 100%">退出账号</a-button>
          </a-row>
          <a-descriptions
            class="labelCenter marginTop12"
            layout="horizontal"
            size="small"
          >
            <a-descriptions-item
              v-for="item in detailData"
              :key="item.value"
              :label="item.name"
              :span="3"
            >
              {{ item.value }}
            </a-descriptions-item>
          </a-descriptions>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button type="primary" style="width: 100%">修改密码</a-button>
          </a-row>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button style="width: 100%">退出账号</a-button>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  // padding: 15px;
  // background: #ececec;
}
.border-radius0 {
  border-radius: 0 !important;
}
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
  // .titleHeader {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   font-family: PingFang SC, PingFang SC;
  //   font-weight: 400;
  //   font-size: 16px;
  //   color: #3c3c3c;
  //   line-height: 24px;
  //   margin-top: 14px;
  //   text-align: left;
  //   .titleLeft {
  //     font-weight: bold;
  //   }
  // }
}

.fontSize8 {
  font-size: 8px;
  color: #4cc87e;
}

.box_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.basic_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.marginTop12 {
  margin-top: 12px;
}
:deep(.ant-card-head) {
  border-bottom: none;
}
.basic_info_box {
  display: flex;
  align-items: center;
  // color: #6e6e6e;
  .lt {
    margin-left: 12px;
    // width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    span {
      width: 100%;
    }
  }
  .rt {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.lt {
  margin-left: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .app_status {
    width: 100%;
    display: inline-block;
  }
}
.box {
  // background-color: #4cc87e;
  background-color: #4cc87e;
}
.box_avatar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .box_avatar_qq {
    font-size: 12px;
  }
}
.descriptions_span {
  display: inline-flex;
  float: right;
  cursor: pointer;
}
.labelCenter .ant-descriptions-item-label {
  text-align: center;
}
:deep(.ant-descriptions-view) {
  border: none !important;
  .ant-descriptions-row {
    border: none;
    th {
      border: none;
      background: none;
    }
  }
}
:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-descriptions.ant-descriptions-bordered
    .ant-descriptions-item-label) {
  border-inline-end: none;
}
:deep(.css-dev-only-do-not-override-12oi33h .ant-typography) {
  margin-bottom: 0;
}
.image_group {
  display: flex;
  // flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  :deep(.ant-image) {
    margin-right: 12px;
  }
}
:deep(.ant-image) {
  margin-right: 12px;
}
.tips {
  font-size: 12px;
  color: #969696;
}
</style>
